<template>
  <div class="shopping-cart">
    <!-- 头部 -->
    <NavigationBar title="购物车"></NavigationBar>
    <div class="main" v-if="shoppingCart.length>0">
      <div class="cartContent">
        <div class="item" v-for="(item,index) in shoppingCart" :key="index"
             @click="$router.push({name:'details',params:{id:item.goods_id}})">
          <img :src="'https://files.roborock.com/uploadImages/'+item.product.default_photo" alt="">
          <div class="right">
            <div class="name">{{ item.product.name }}</div>
            <div class="price">￥{{ item.product.current_price }}</div>
            <div class="stepper">
              <button class="btn" @click.stop="reduce(index)">-</button>
              <input disabled type="text" v-model="item.amount"/>
              <button class="btn" @click.stop="add(index)">+</button>
            </div>
          </div>
          <!-- 删除 -->
          <div class="cross" @click.stop="del(index)"></div>
        </div>
      </div>
      <!-- 结算 -->
      <div class="settlement">
        <van-button @click="buy" round size="large" type="info">结算:￥{{ settlement }}</van-button>
      </div>
    </div>
    <!-- 空页面 -->
    <van-empty
      v-else
      class="custom-image"
      image="https://files.roborock.com/mini_img/cart/cart.png"
      description="您的购物袋中没有内容"
    />
  </div>
</template>

<script>
export default {
  name: "ShoppingCart",
  data() {
    return {
      shoppingCart: [],
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {
    settlement() {
      let total = 0;
      this.shoppingCart.forEach(item => {
        total += item.product.current_price * item.amount;
      });
      return total;
    }
  },
// 事件
  methods: {
    // 购物车结算
    buy() {
      let data = []
      this.shoppingCart.forEach(item => {
        data.push({
          goods_id: item.goods_id,
          cat_id: item.product.category,
          name: item.product.name,
          price: item.price,
          num: item.amount,
          img: 'https://files.roborock.com/uploadImages/' + item.product.default_photo,
          cart_good_id: item.id
        })
      });
      data = JSON.stringify(data);
      this.$router.push({
        name: 'confirm-order', query: {data, isCart: true}
      })
    },
    upShoppingCart() {
      this.shoppingCart.forEach(item => {
        this.$ajax.upShoppingCart({
          amount: item.amount,
          good: item.id
        },).then(res => {
          if (res.error_code !== 0) {
            this.$toast(res.error_desc)
          }
          // console.log("更新购物车", res)
        })
      })
    },
    reduce(index) {
      if (this.shoppingCart[index].amount > 1) {
        this.shoppingCart[index].amount--
      } else {
        this.shoppingCart[index].amount = 1
      }
    },
    add(index) {
      this.shoppingCart[index].amount++
    },
    del(index) {
      // Dialog.confirm({
      //   title: '删除提示',
      //   message: '确定要删除码？',
      // }).then(() => {
      //   // on confirm
      // })
      this.$ajax.delShoppingCart({
        good: this.shoppingCart[index].id
      }).then(res => {
        if (res.error_code === 0) {
          this.getShoppingCart()
          // console.log("更新购物车", res)
          // this.getShoppingCart()
        } else {
          this.$toast(res.error_desc)
        }
      })
    },
    getShoppingCart() {
      this.$ajax.shoppingCart().then(res => {
        if (res.error_code === 0) {
          if (res.goods_groups.length > 0) {
            this.shoppingCart = res.goods_groups[0].goods
          } else {
            this.shoppingCart = []
          }
          // console.log("购物车数据", this.shoppingCart)
        } else {
          this.$toast(res.error_desc)
        }
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getShoppingCart()
  },
  beforeDestroy() {
    this.upShoppingCart()
  },
  //  守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.vuexUserInfo.token) {
        vm.$router.replace({
          name: 'login'
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.shopping-cart {
  width: 100%;

  ::v-deep.van-empty__image {
    margin-top: 180px;
    width: 75px;
    height: 75px;
  }

  .cartContent {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 60px;

    .item {
      padding: 15px 10px 15px;
      box-sizing: border-box;
      position: relative;
      background-color: #fff;
      margin-bottom: 15px;
      border-radius: 14px;
      display: flex;

      img {
        height: 76px;
      }

      .right {
        width: 60%;
        padding-left: 20px;

        .name {
          width: 100%;
          color: #4a4a4a;
          font-size: 14px;
          margin-bottom: 5px;
          //padding-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .price {
          color: #72b4fe;
          font-size: 14px;
        }

        .stepper {
          margin-top: 10px;
          display: flex;

          .btn {
            display: inline-block;
            width: 40px;
            height: 26px;
            border-radius: 13px;
            text-align: center;
            line-height: 26px;
            color: black;
            border: 1px solid #ccc;
            background-color: transparent;
            font-size: 18.75px;
            padding: 0;
            box-sizing: content-box;
          }

          input {
            font-size: 16px;
            width: 50px;
            flex: none;
            display: inline;
            color: #000;
            border: 0;
            background-color: transparent;
            text-align: center;
            font-weight: normal;
          }
        }
      }

      .cross {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        background: url(https://files.roborock.com/mini_img/cart/delete.png) 50% no-repeat;
        background-size: 100% auto;
      }
    }
  }

  .settlement {
    position: fixed;
    padding: 20px 42px 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;

    .van-button--info {
      background: linear-gradient(270deg, #3777f7, #72b4fe);
      height: 40px;
    }
  }
}
</style>